<template>
  <div style="margin-left: 20px">
    <el-button @click="addplanDiavissable = true">新增点检计划</el-button>
    <el-dialog v-model="addplanDiavissable" title="新增点检计划">
      <el-button @click="console1">打印form</el-button>
      <el-form>
        <el-form-item label="请输入点检计划名称"
          ><el-input></el-input
        ></el-form-item>
        <el-form-item label="请输入周期实数"
          ><el-input></el-input
        ></el-form-item>
        <el-form-item label="请选择周期单位"
          ><el-select v-model="planForm.periodicUnit">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            ></el-option> </el-select
        ></el-form-item>
        <el-table>
          <el-table-column label="表头1"></el-table-column>
          <el-table-column label="表头2"></el-table-column>
          <el-table-column label="表头3"></el-table-column>
          <el-table-column label="表头4"></el-table-column>
          <el-table-column label="表头5"></el-table-column>
          <el-table-column label="表头6"></el-table-column>
          <el-table-column label="表头7"></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const addplanDiavissable = ref(false)
const planForm = ref({})
// 时间周期选项
const timeOptions = ref([
  { value: 1, label: '天' },
  { value: 2, label: '周' },
  { value: 3, label: '月' },
  { value: 4, label: '小时' }
])
const console1 = () => {
  console.log(planForm.value)
}
</script>
